<template>
  <div class="maincontent">
    <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
      <el-tab-pane name="0">
        <span slot="label"> <i class="el-icon-s-order"></i>&nbsp;待办箱 </span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label"> <i class="el-icon-s-claim"></i>&nbsp;已办箱 </span>
      </el-tab-pane>
    </el-tabs>
    <el-form :inline="true" :model="form" label-width="80px">
      <el-form-item label="业务编号">
        <el-input v-model="form.number" style="width:200px;"></el-input>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input v-model="form.name" style="width:200px;"></el-input>
      </el-form-item>
      <el-form-item label="项目级别">
        <el-select clearable v-model="form.level" placeholder="请选择">
          <el-option label="市级" value="shanghai"></el-option>
          <el-option label="区县级" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="当前岗位">
        <el-select clearable v-model="form.link" placeholder="请选择">
          <el-option
            v-for="(item, index) in jobList"
            :key="index"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList(0)">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- <div class="lines"></div> -->
    <el-table
      v-loading="loading"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="55"></el-table-column>
      <el-table-column prop="number" label="业务编号"></el-table-column>
      <el-table-column prop="district" label="所在区县"></el-table-column>
      <el-table-column prop="type" label="项目类型"></el-table-column>
      <el-table-column prop="level" label="项目级别"></el-table-column>
      <el-table-column prop="name" label="项目名称"></el-table-column>
      <el-table-column prop="link" label="当前岗位"></el-table-column>
      <el-table-column
        prop="updateTime"
        label="上一岗位提交时间"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleSaveData(scope.row)" type="primary" size="mini">{{tabActiveName == '0'?'办理':'查看'}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right">
      <el-pagination
        :current-page.sync="form.page"
        :page-size="form.rows"
        @current-change="getList"
        layout="prev, pager, next, jumper"
        :total="pageTotal"
        style="margin-top:20px"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getList,
  getJobList
} from "@/api/projectManage/projectImplementation.js";
import config, { handleThreePhaseJumpRoute } from "@/config";

export default {
  data() {
    return {
      userInfo:"",
      form: {
        number: "",
        name: "",
        level: "",
        link: "",
        page: 1,
        rows: 10,
        status: "0"
      },
      loading: false,
      pageTotal: 0,
      tableData: [],
      tabActiveName:"0",
      jobList: [] //当前岗位列
    };
  },
  created() {
    this.userInfo = this.$store.state.user.userInfo;
    this.getJobList();
    this.getList();
  },
  methods: {
    getList(type) {
      //获取列表
      if (type === 0) {
        this.form.page = 1;
      }
      this.loading = true;
      getList(this.form)
        .then(res => {
          this.loading = false;
          this.pageTotal = res.data.total;
          this.tableData = res.data.list;
        })
        .catch(res => {
          this.loading = false;
        });
    },
    getJobList() {
      getJobList().then(res => {
        this.jobList = res.data;
      });
    },
    handleSaveData(row) {
      localStorage.setItem("router", row.key);
      if (this.userInfo.roleList.length > 0) {
        localStorage.setItem("menusName", this.userInfo.roleList[0].code);
      } else {
        this.$alert("暂无权限", "提示", {
          confirmButtonText: "确定",
          callback: action => {
            this.$router.push("/login");
          }
        });
      }
      localStorage.setItem("key", row.key);
      localStorage.setItem("userId", this.userInfo.userId);
      localStorage.setItem("projectId", row.id);
      localStorage.setItem("projectName", row.name);
      
      handleThreePhaseJumpRoute();
    },
    handleTabClick:function (tab) {
      if(tab.name == 0){
        this.form['status'] = 0;
        this.getList();
      }else{
        this.form['status'] = 1;
        this.getList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  padding: 30px 40px;
  .lines {
    height: 10px;
    background: rgba(245, 247, 250, 1);
    margin-top: 20px;
  }
}

/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
}
</style>
